<template>
  <div class="home">
    <div class="home-content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item to="/order"><van-icon name="home-o" slot="icon"></van-icon>主页</van-tabbar-item>
      <van-tabbar-item to="/productSetting"><van-icon name="apps-o" slot="icon"></van-icon>商品</van-tabbar-item>
      <!-- <van-tabbar-item v-if="stationInfo.cardNo != -1" to="/stock"><van-icon name="logistics" slot="icon"></van-icon>进货</van-tabbar-item> -->
      <van-tabbar-item to="/mine"><van-icon name="contact" slot="icon"></van-icon>我的</van-tabbar-item>
    </van-tabbar>
  </div> 
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'home',
  components: {},
  data() {
    return {
      routeIndex: {
        'order': 0,
        'productSetting': 1,
        'stock': 2,
        'mine': 3
      },
    };
  },
  computed: {
    ...mapState(['stationInfo']),
    active: {
      get() {
        return this.routeIndex[this.$route.name] || 0;
      },
      set(val) {}
    }
  },
  mounted() {
    console.log(this.stationInfo)
  }
};
</script>
<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;

  .home-content {
    height: 100vh;
    padding-bottom: 50px;
    overflow-y: auto;
    background-color: #f5f5f5;
  }
}
</style>
